<template>
  <div class="container">
    <h1>Vue Excel 导入导出示例</h1>
    
    <ExcelImport 
      @import-success="handleImportSuccess" 
      @import-error="handleImportError"
    />
    
    <ExcelExport 
      :data="tableData" 
      :columns="tableColumns" 
      filename="导出数据.xlsx"
    />
    
    <div class="section">
      <h2>表格数据</h2>
      <div v-if="loading" class="loading">加载中...</div>
      <div v-else>
        <table>
          <thead>
            <tr>
              <th v-for="col in tableColumns" :key="col.prop">{{ col.label }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, index) in tableData" :key="index">
              <td v-for="col in tableColumns" :key="col.prop">
                {{ row[col.prop] }}
              </td>
            </tr>
          </tbody>
        </table>
        
        <div v-if="tableData.length === 0" class="empty">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import ExcelImport from '@/components/ExcelImport.vue';
import ExcelExport from '@/components/ExcelExport.vue';

export default {
  components: {
    ExcelImport,
    ExcelExport
  },
  data() {
    return {
      tableData: [],
      tableColumns: [
        { prop: 'ID', label: 'ID' },
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' },
        { prop: 'email', label: '邮箱' },
        { prop: 'department', label: '部门' }
      ],
      loading: false
    };
  },
  methods: {
    
  handleData(data) {
  const propertyMap = {
    'ID': 'ID',
    '姓名': 'name',
    '年龄': 'age',
    '邮箱': 'email',
    '部门': 'department'
  };
  // 使用 map 方法转换数据
  return data.map(item => {
    return Object.entries(item).reduce((newItem, [chineseProp, value]) => {
      newItem[propertyMap[chineseProp] || chineseProp] = value;
      return newItem;
    }, {});
  });
  
  // console.log('转换后的数据:', this.tableData);
},

    handleImportSuccess(data) {
   this.tableData =  this.handleData(data)
      console.log('导入成功:', data);
    },
    handleImportError(error) {
      console.error('导入失败:', error);
    }
  },
  mounted() {
    // 模拟初始数据
    this.tableData = [
      { ID: 1, name: '张三', age: 28, email: 'zhangsan@example.com', department: '技术部' },
      { ID: 2, name: '李四', age: 32, email: 'lisi@example.com', department: '市场部' },
      { ID: 3, name: '王五', age: 25, email: 'wangwu@example.com', department: '人力资源部' }
    ];
  }
};
</script>
